<!-- 方案列表 -->
<template>
  <view class="scheme">

    <view class="list">
      
      <view class="scheme-item"  v-for="(item, index) in this.schemeList" :key="index"  @click="goDetail(index)">

        <img :src="'https://fh4.qinyuan.cn' + item.bgimages" class="schema-img">
        <view class="title">{{ item.name }}</view>
        <view class="desc">{{ item.index_desc }}</view>

        <view class="describe-list" v-if="item.type != '别墅'">
          <view class="describe" v-for="(labelName, index) in item.label" :key="index">{{ labelName }}</view>
        </view>

        <view class="describe-list" style="padding: 0" v-if="item.type == '别墅'">
          <view class="sub-tt">B1&1F</view><view class="describe" v-for="(labelName, index) in item.label.slice(0, 5)" :key="index">{{ labelName }}</view>
        </view>
        <view class="describe-list" style="padding: 0" v-if="item.type == '别墅'">
          <view class="sub-tt">2F&3F</view> <view class="describe" v-for="(labelName, index) in item.label.slice(5)" :key="index">{{ labelName }}</view>
        </view>

        <view class="price">市场参考价：{{ item.prices }}￥</view>

<!--        <view class="bottom">-->
<!--&lt;!&ndash;          <view class="left">滤芯损耗：xxxx￥</view>&ndash;&gt;-->
<!--          <view class="left"></view>-->
<!--          <view class="detail" @click="goDetail(index)">方案详情</view>-->
<!--        </view>-->
      </view>

    </view>

  </view>
</template>

<script>
import requestV1 from "../../common/requestV1";
export default {
  data() {
    return {
      requestData: null,
      schemeList: []
    }
  },
  onLoad(e) {
    this.requestData = { ...e }
    // this.requestData = {name: "dsa", type: "5", area: "43", toll: "1"}
    this.getSchemeList()
  },
  methods: {
    async getSchemeList() {
      const data = await requestV1({
        url: '/footmarks2/plan_sumbit',
        method: 'post',
        data: this.requestData
      })
      if (data.code === 1) {
        this.schemeList = data.data
      }
    },
    goDetail(index) {
      const queryString = `?name=${this.requestData.name}&type=${this.requestData.type}&area=${this.requestData.area}&toll=${this.requestData.toll}&schemeIndex=${index}`
      uni.navigateTo({
        url: '/pages/schemeDetail/schemeDetail' + queryString
      })
    },
    goPage(url, links) {
      url = links
        ? url + '?url=' + links
        : url

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scheme {
  background-color: #fff;
  height: 100%;
  overflow: auto;
  
  .list {
    width: calc(100% - 72rpx);
    margin: 0 auto;
    min-height: calc(100vh - 36rpx);
    
    .scheme-item {
      position: relative;
      background-color: #fff;
      border-radius: 29rpx;
      padding-top: 24rpx;
      box-sizing: border-box;
      margin-bottom: 36rpx;
      text-align: center;
      .schema-img {
        width: 690rpx;
        height: 415rpx;
        margin-bottom: 24rpx;
        border-radius: 24rpx;
      }
      .title {
        font-size: 36rpx;
        line-height: 58rpx;
        color: rgba(20, 19, 18, 1);
        font-weight: bold;
        text-align: left;
      }
      .desc {
        color: #666;
        font-size: 23.4rpx;
        text-align: left;
        margin: 12rpx 0 18rpx;
      }
      .price {
        margin: 18rpx 0 12rpx;
        font-size: 26rpx;
        line-height: 54rpx;
        color: rgba(20, 19, 18, 0.45);
        text-align: left;
      }
      .describe-list {
        padding: 0 24rpx;
        margin-bottom: 18rpx;
        display: flex;
        .sub-tt {
          color: rgb(0, 29, 97);
          margin-right: 10rpx;
          font-size: 20rpx;
          line-height: 48.6rpx;
        }
        .describe {
          margin-right: 16rpx;
          background-color: rgba(0, 29, 97, 1);
          color: #fff;
          font-size: 18rpx;
          text-align: center;
          min-width: 108rpx;
          height: 48.6rpx;
          line-height: 48.6rpx;
          border-radius: 12rpx;
        }
      }
      .bottom {
        position: absolute;
        bottom: 24rpx;
        display: flex;
        right: 0;
        justify-content: space-between;
        padding: 0 36rpx;
        .left {
          font-size: 27rpx;
          line-height: 54rpx;
          color: rgba(136, 133, 133, 1);
        }
        .detail {
          width: 129.6rpx;
          height: 54rpx;
          border-radius: 13rpx;
          background-color: rgba(55, 68, 134, 1);
          font-size: 21.6rpx;
          line-height: 54rpx;
          text-align: center;
          color: rgba(255, 255, 255, 1);
          margin-right: 54rpx;
        }
      }
    }
  }
}
</style>
